<template>
	<view>
		<view class="target" v-if="isShow">
			<view class="fill-target">
				<view class="fill-target-content">
					<view class="fill-target-title">我的目标</view>
					<view class="fill-target-num">568分 | 广西 | 理科 <u-icon name="edit-pen" size="32" class="edit" @click="goto('../pages/basicInfo')"></u-icon></view>
					<view class="fill-btn" @click="goto('../pages/chooseTarget')">立目标</view>
				</view>
			</view>
			<view class="target-title"><view>我的成绩</view></view>
			<view class="target-table">
				<view class="target-table-titile"><view></view>理科568分与近三年的高考位次及线差对比</view>
				<view class="target-table-content">
					<u-table>
						<u-tr>
							<u-th class="empty">1</u-th>
							<u-th>2020</u-th>
							<u-th>2019</u-th>
							<u-th>2018</u-th>
						</u-tr>
						<u-tr>
							<u-td>高考位次</u-td>
							<u-td>1213</u-td>
							<u-td>2231</u-td>
							<u-td>12333</u-td>
						</u-tr>
						<u-tr>
							<u-td>线性</u-td>
							<u-td>67</u-td>
							<u-td>76</u-td>
							<u-td>66</u-td>
						</u-tr>
					</u-table>
				</view>
				<view class="target-table-text">结论：近年568分对应的高考位次在14168 ~ 15420位之间，你超过了 广西 理科 92% ~93% 的考生。568分超过了最近三年本科一批分数线55 ~72分</view>
			</view>
			<view class="target-table">
				<view class="target-table-titile"><view></view>568分对应大学</view>
				<view class="target-table-titile1">2020年568分可以考上一下大学</view>
				<view class="target-table-list">
					<view class="target-table-item">
						<view class="target-table-content1">
							<image src="../../static/logo.png" mode=""></image>
							北京语言大学
							<view>北京</view>
						</view>
						<view class="target-table-content2 target-table-content3">公立 | 中央部属高校 | 隶属教育部</view>
						<view class="target-table-content2">2020年最低分 568 位次 14168</view>
						<view class="target-table-content2">2019年最低分 581  位次 11954</view>
						<u-icon name="arrow-right" color="#c6c6c6" class="target-arrow"></u-icon>
					</view>
					<view class="target-table-item">
						<view class="target-table-content1">
							<image src="../../static/logo.png" mode=""></image>
							北京语言大学
							<view>北京</view>
						</view>
						<view class="target-table-content2 target-table-content3">公立 | 中央部属高校 | 隶属教育部</view>
						<view class="target-table-content2">2020年最低分 568 位次 14168</view>
						<view class="target-table-content2">2019年最低分 581  位次 11954</view>
						<u-icon name="arrow-right" color="#c6c6c6" class="target-arrow"></u-icon>
					</view>
					<view class="target-table-item">
						<view class="target-table-content1">
							<image src="../../static/logo.png" mode=""></image>
							北京语言大学
							<view>北京</view>
						</view>
						<view class="target-table-content2 target-table-content3">公立 | 中央部属高校 | 隶属教育部</view>
						<view class="target-table-content2">2020年最低分 568 位次 14168</view>
						<view class="target-table-content2">2019年最低分 581  位次 11954</view>
						<u-icon name="arrow-right" color="#c6c6c6" class="target-arrow"></u-icon>
					</view>
				</view>
			</view>
			<view class="target-title"><view>努力方向</view></view>
			<view class="target-table">
				<view class="target-table-titile"><view></view>提升成绩后对应大学</view>
				<view class="target-table-tabs">
					<view>30分</view><view>50分</view><view>80分</view>
				</view>
				<view class="target-table-text1">预计提升 <text>30分</text> 后可以考上以下大学</view>
				<view class="target-table-list">
					<view class="target-table-item">
						<view class="target-table-content1">
							<image src="../../static/logo.png" mode=""></image>
							北京语言大学
							<view>北京</view>
						</view>
						<view class="target-table-content2 target-table-content3">公立 | 中央部属高校 | 隶属教育部</view>
						<view class="target-table-content2">2020年最低分 568 位次 14168</view>
						<view class="target-table-content2">2019年最低分 581  位次 11954</view>
						<u-icon name="arrow-right" color="#c6c6c6" class="target-arrow"></u-icon>
					</view>
					<view class="target-table-item">
						<view class="target-table-content1">
							<image src="../../static/logo.png" mode=""></image>
							北京语言大学
							<view>北京</view>
						</view>
						<view class="target-table-content2 target-table-content3">公立 | 中央部属高校 | 隶属教育部</view>
						<view class="target-table-content2">2020年最低分 568 位次 14168</view>
						<view class="target-table-content2">2019年最低分 581  位次 11954</view>
						<u-icon name="arrow-right" color="#c6c6c6" class="target-arrow"></u-icon>
					</view>
					<view class="target-table-item">
						<view class="target-table-content1">
							<image src="../../static/logo.png" mode=""></image>
							北京语言大学
							<view>北京</view>
						</view>
						<view class="target-table-content2 target-table-content3">公立 | 中央部属高校 | 隶属教育部</view>
						<view class="target-table-content2">2020年最低分 568 位次 14168</view>
						<view class="target-table-content2">2019年最低分 581  位次 11954</view>
						<u-icon name="arrow-right" color="#c6c6c6" class="target-arrow"></u-icon>
					</view>
				</view>
			</view>	
			<view class="target-down-btn">
				下载模考成绩报告
			</view>
		</view>
		<view class="target my-target">
			<view class="fill-target">
				<view class="fill-target-content">
					<view class="fill-target-title">我的目标</view>
					<view class="my-target-title1">2021年高考批次线公布后，将重新生成报告。</view>
					<view class="my-target-content1">
						<image src="../../static/logo.png" mode=""></image>
						华南理工大学
						<text>本科一批</text>
					</view>
					<view class="my-target-text1">广州 | 双一流A类高校 | 隶属教育部</view>
					<view class="my-target-text1">2020年最低分 627 位次 2953</view>
					<view class="my-target-text1">2019年最低分 635  位次2708</view>
					
					<view class="my-target-text2">568 分 | 广西 | 理科</view>
					
					<view class="my-target-text3"><view class="my-target-icon my-target-icon1"></view>离2021年高考还剩 123 天</view>
					<view class="my-target-text3"><view class="my-target-icon my-target-icon2"></view>你离目标学校还差 29 分</view>
					<view class="my-target-text3"><view class="my-target-icon my-target-icon3"></view>平均每天仅需提升 <text> 0.48 </text> 分</view>
					<view class="my-target-btn my-target-btn2" @click="goto('../pages/chooseTarget')">修改目标学校</view>
					<view class="my-target-btn my-target-btn1" @click="goto('../pages/myResult')">目标与成绩</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: true
			}
		},
		onLoad(options) {
			if(options.schoolId) {
				this.isShow = false;
			}
		},
		methods: {
			goto(name) {
				uni.navigateTo({
					url: name
				});
			}
		}
	}
</script>

<style lang="less">
	.target {
		.fill-target {
			background-color: #45b688;
			padding: 0 40rpx;
			height: 520rpx;
			text-align: center;
			position: relative;
			.fill-target-content {
				display: block;
				width: calc(100% - 80rpx);
				min-height: 400rpx;
				box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 15px 0px;
				background-color: #FFFFFF;
				padding: 0 30rpx;
				position: absolute;
				top: 130rpx;
				.fill-target-title {
					float: left;
					background-color: #00ca8a;
					height: 60rpx;
					line-height: 60rpx;
					color: #FFFFFF;
					border-radius: 50px;
					padding: 0 40rpx;
					margin-top: -30rpx;
					margin-left: calc(50% - 96rpx);
				}
				.fill-target-num {
					margin-top: 80rpx;
					.edit {
						margin-left: 16rpx;
					}
				}
				.fill-btn {
					float: left;
					width: 100%;
					background-color: #fed45b;
					color: #FFFFFF;
					border-radius: 5px;
					height: 80rpx;
					line-height: 80rpx;
					margin-top: 120rpx;
				}
			}
		}
		.target-title {
			height: 4rpx;
			background-color: #45b688;
			margin: 100rpx 40rpx 40rpx 40rpx;
			position: relative;
			>view {
				display: inline-block;
				background-color: #45b688;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 50px;
				padding: 0 30rpx;
				color: #FFFFFF;
				position: absolute;
				top: 0;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
		.target-table {
			.target-table-titile {
				padding: 20rpx;
				line-height: 50rpx;
				margin-top: 20rpx;
				font-weight: bold;
				>view {
					float: left;
					height: 50rpx;
					width: 10rpx;
					background-color: #45b688;
					margin-right: 8rpx;
				}
			}
			.target-table-content {
				padding: 0 40rpx;
			}
			.target-table-text {
				padding: 0 40rpx;
				margin-top: 20rpx;
				font-size: 24rpx;
			}
			.target-table-titile1 {
				padding: 0 40rpx;
				margin-top: -20rpx;
				font-size: 24rpx;
				color: #c6c6c6;
			}
			.target-table-list {
				padding: 0 40rpx;
				
				.target-table-item {
					position: relative;
					margin-top: 40rpx;
					border-bottom: 1px solid #F1F1F1;
					padding-bottom: 36rpx;
				}
				
				.target-table-content1 {
					line-height: 82rpx;
					font-size: 36rpx;
					image {
						float: left;
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}
					>view {
						float: right;
						font-size: 24rpx;
					}
				}
				.target-table-content2 {
					padding-left: 100rpx;
					margin-bottom: 4rpx;
				}
				.target-table-content3 {
					margin-top: -6rpx;
				}
				.target-arrow {
					position: absolute;
					right: 0;
					top: 55%;
				}
			}
			.target-table-tabs {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				text-align: center;
				padding: 0 40rpx;
				>view {
					background-color: #00ca8a;
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 5px;
					width: 150rpx;
					color: #FFFFFF;
				}
			}
			.target-table-text1 {
				padding: 40rpx 0 0 40rpx;
				text {
					color: #00ca8a;
				}
			}
		}
		.target-down-btn {
			background-color: #fd7649;
			margin: 80rpx 60rpx;
			border-radius: 100px;
			text-align: center;
			color: #FFFFFF;
			font-size: 32rpx;
			height: 80rpx;
			line-height: 80rpx;
		}
	}
	.my-target {
		.fill-target {
			text-align: left;
		}
		.fill-target-title {
			background-color: #FFFFFF !important;
			color: #45b688 !important;
			border: 1px solid #45b688 !important;
		}
		.my-target-title1 {
			margin-top: 60rpx;
			margin-bottom: 40rpx;
			font-size: 13px;
			color: #fd7649;
		}
		.my-target-content1 {
			font-size: 36rpx;
			line-height: 80rpx;
			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				float: left;
				margin-right: 20rpx;
			}
			text {
				font-size: 24rpx;
				margin-left: 20rpx;
			}
		}
		.my-target-text1 {
			padding-left: 100rpx;
			margin-bottom: 10rpx;
		}
		.my-target-text2 {
			color: #fd7649;
			font-size: 32rpx;
			text-align: center;
			margin: 40rpx;
		}
		.my-target-text3 {
			padding-left: 70rpx;
			margin-bottom: 20rpx;
			.my-target-icon {
				float: left;
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}
			.my-target-icon1 {
				background: url(../../static/time.png) no-repeat;
				background-size: 100% 100%;
			}
			.my-target-icon2 {
				background: url(../../static/target.png) no-repeat;
				background-size: 100% 100%;
			}
			.my-target-icon3 {
				background: url(../../static/up.png) no-repeat;
				background-size: 100% 100%;
			}
			text {
				color: #20b86f;
				margin: 0 6rpx;
			}
		}
		.my-target-btn {
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 5px;
			background-color: #fd7649;
			text-align: center;
			margin-bottom: 30rpx;
			color: #FFFFFF;
		}
		.my-target-btn1 {
			margin-bottom: 80rpx;
		}
		.my-target-btn2 {
			margin-top: 40rpx;
		}
	}
</style>